import React, { CSSProperties, ReactNode, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import classNames from 'classNames';
import { ConfigContext } from '../config-provider';
import {
  CheckCircleFilled,
  CloseCircleFilled,
  ExclamationCircleFilled,
  InfoCircleFilled,
  LoadingOutlined,
} from '@ant-design/icons';
import './style/index.less';
export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
export interface MessageInnerProps {
  className?: string;
  type?: NoticeType;
  children?: ReactNode;
  style?: CSSProperties;
}

export const MessageInner = (props) => {
  const { type = 'info', content, children } = props;
  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('message');
  const iconClass = classNames([`${prefixCls}-icon`, `${prefixCls}-${type}`]);

  let icon = <InfoCircleFilled />;
  console.log('type', type);
  switch (type) {
    case 'success':
      icon = <CheckCircleFilled />;
      break;
    case 'error':
      icon = <CloseCircleFilled />;
      break;
    case 'warning':
      icon = <ExclamationCircleFilled />;
      break;
    case 'loading':
      icon = <LoadingOutlined />;
      break;
  }

  return (
    <div className={prefixCls + '-content'}>
      <span className={iconClass}>{icon}</span>
      {content}
    </div>
  );
};

type messageItem = {
  key: number;
  type: string;
  content: string;
  duration: number;
  hide?: boolean;
  timer?: number | null;
};

export interface messageProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
  className?: string;
  type?: 'normal' | 'primary' | 'dashed' | 'link' | 'text';
  size?: 'small' | 'medium' | 'large';
  children?: ReactNode;
  style?: CSSProperties;
  dataSource: Array<messageItem>;
}

const Message = (props: messageProps) => {
  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('message');
  const { dataSource, ...others } = props;
  console.log('props', props);
  const [list, setList] = useState(dataSource);
  useEffect(() => {
    setList(dataSource);
  }, [dataSource.length]);

  list.forEach((item) => {
    if (!item.timer) {
      item.timer = setTimeout(() => {
        const idx = list.indexOf(item);
        if (idx > -1) {
          item.hide = true;
          setList([...list]);
        }
      }, item.duration * 1000);
    }
  });

  let fixedPosition = {
    left: '50%',
    transform: 'translateX(-50%)',
    top: '8px',
  };
  return (
    <div style={fixedPosition} className={prefixCls}>
      {list?.map((item) => item.hide !== true && <MessageInner {...item} />)}
    </div>
  );
};

let messageMountRoot: HTMLElement | null = null;
let messageIndex = 0;
const messageList: Array<messageItem> = [];

const callMessage = (type, content, duration) => {
  if (!messageMountRoot) {
    //messageMountRoot = createRoot(messageMountRoot)
    // messageMountRoot = document.createElement('div');
    const container = document.createElement('div');
    document.body.appendChild(container);
    messageMountRoot = createRoot(container)
   
  }

  messageList.push({
    key: ++messageIndex,
    type,
    content,
    duration,
  });



  //const root = createRoot(messageMountRoot);
  messageMountRoot.render(<Message dataSource={messageList} />);
};

export default {
  success: (content, duration = 3) => callMessage('success', content, duration),
  warning: (content, duration = 3) => callMessage('warning', content, duration),
  loading: (content, duration = 3) => callMessage('loading', content, duration),
  info: (content, duration = 6) => callMessage('info', content, duration),
  error: (content, duration = 3) => callMessage('error', content, duration),
};
